<template>
  <div>
    <span class="dynamic-title1">
      文件资料
      <SvgIcon icon-class="folder" />
    </span>
    <div v-if="documentTypesArray" class="document-box">
      <div class="document-list">
        <li class="document-title">名称</li>
        <li class="document-time">时间</li>
      </div>
      <NoData v-show="totalCount===0" />
      <div v-for="item in documentList" :key="item.id" class="document-list">
        <li class="document-title">
          <SvgIcon icon-class="document" />
          <span style="cursor: pointer;" @click="downloadFiles(item.attachments)">{{ item.title }}</span>
        </li>
        <li class="document-time">{{ parseTime(item.sendTime,'{y}-{m}-{d}') }}</li>
      </div>
    </div>
    <div class="more-news">
      <router-link to="/documentAndNotice">
        <a>
          <span>
            更多文件
            <i class="el-icon-arrow-right" />
          </span>
        </a>
      </router-link>
    </div>
  </div>
</template>
<script>
import { downloadUrl } from '@/api/common/static'
import { list } from '@/api/zzxt/notice'
import { parseTime } from '@/utils'
export default {
  name: 'DocumentSummary',
  components: {
    NoData: () => import('@/views/Loading/NoData')
  },
  data: () => ({
    loading: false,
    documentList: null,
    totalCount: 0
  }),
  computed: {
    documentTypesArray() {
      return this.$store.state.notice.documentTypesArray
    }
  },
  watch: {
    documentTypesArray: {
      handler(val) {
        if (!val) return
        this.refresh()
      },
      immediate: true
    }
  },
  methods: {
    downloadFiles(fileList) {
      if (fileList.length === 0) {
        this.$message.warning('文件损坏或者不存在')
        return
      }
      fileList.forEach(item => {
        const file = JSON.parse(item)
        downloadUrl(file.id)
      })
    },
    parseTime,
    async refresh() {
      if (this.loading) return this.$message.warning('数据加载中')
      this.loading = true
      const page = { pageIndex: 0, pageSize: 6 }
      const query = {
        page,
        type: this.documentTypesArray
      }
      await list(query)
        .then(data => {
          this.documentList = data.list
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../home/style.scss';
</style>
